<template>
    <div class="body">
        <div class="pannel-title">
            <div>单位管理</div>
            <span v-if="timer">上次更新时间：{{timer}}</span>
        </div>
        <div class="filter-box" >
            <a-select v-model:value="grid03.pageData.inspectLevel" @change="change()" style="width: 120px;margin-right:15px;">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="High">重点单位</a-select-option>
                <a-select-option value="Medium">普通单位</a-select-option>
            </a-select>
            <a-select v-model:value="grid03.pageData.natureTypeId" @change="change()" style="width: 120px;margin-right:15px;">
                <a-select-option value="">全部</a-select-option>
                <a-select-option v-for="item in natureTypeIds" :key="item" :value="item.id">{{ item.name }}</a-select-option>
            </a-select>
            <a-select v-if='roleId == 1' v-model:value="grid03.pageData.psId" @change="change()" style="width: 120px;margin-right:15px;">
                <a-select-option value="">全部</a-select-option>
                <a-select-option v-for="item in roleList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
            </a-select>
            <a-input-search v-model:value="grid03.pageData.keywords" @search="search()" placeholder="请输入搜索条件" style="width: 200px" />
            <a v-if='roleId == 1' class="tongbao-btn" @click="toTongBaoItems" v-bind:class="{ active: isTongBaoItems }">
                <span>可通报</span>
            </a>

            <router-link :to="{ path: '/NewManagement' }">
                <a class="download-btn" style="background:#4687FF;color:#fff">
                    <span role="img" aria-label="plus-circle" style="margin-right: 5px" class="anticon anticon-plus-circle"
                        ><svg
                            focusable="false"
                            class=""
                            data-icon="plus-circle"
                            width="1em"
                            height="1em"
                            fill="currentColor"
                            aria-hidden="true"
                            viewBox="64 64 896 896"
                        >
                            <path
                                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm192 472c0 4.4-3.6 8-8 8H544v152c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V544H328c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h152V328c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v152h152c4.4 0 8 3.6 8 8v48z"
                            ></path></svg
                    ></span>
                    <span>新增单位</span>
                </a>
            </router-link>
            <!-- 导出单位 -->
            
            <a class="download-btn" style="background:#4687FF;color:#fff" @click="dowExl">
                <svg focusable="false" class="" data-icon="logout" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M868 732h-70.3c-4.8 0-9.3 2.1-12.3 5.8-7 8.5-14.5 16.7-22.4 24.5a353.84 353.84 0 01-112.7 75.9A352.8 352.8 0 01512.4 866c-47.9 0-94.3-9.4-137.9-27.8a353.84 353.84 0 01-112.7-75.9 353.28 353.28 0 01-76-112.5C167.3 606.2 158 559.9 158 512s9.4-94.2 27.8-137.8c17.8-42.1 43.4-80 76-112.5s70.5-58.1 112.7-75.9c43.6-18.4 90-27.8 137.9-27.8 47.9 0 94.3 9.3 137.9 27.8 42.2 17.8 80.1 43.4 112.7 75.9 7.9 7.9 15.3 16.1 22.4 24.5 3 3.7 7.6 5.8 12.3 5.8H868c6.3 0 10.2-7 6.7-12.3C798 160.5 663.8 81.6 511.3 82 271.7 82.6 79.6 277.1 82 516.4 84.4 751.9 276.2 942 512.4 942c152.1 0 285.7-78.8 362.3-197.7 3.4-5.3-.4-12.3-6.7-12.3zm88.9-226.3L815 393.7c-5.3-4.2-13-.4-13 6.3v76H488c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h314v76c0 6.7 7.8 10.5 13 6.3l141.9-112a8 8 0 000-12.6z"></path></svg>
                <span>导出单位</span>
            </a>
             <!-- 导入单位 -->
            <a class="download-btn" style="background:#4687FF;color:#fff;margin-right: 5px;" @click="upload">
                <svg focusable="false" style="margin-right: 4px;" data-icon="login" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M521.7 82c-152.5-.4-286.7 78.5-363.4 197.7-3.4 5.3.4 12.3 6.7 12.3h70.3c4.8 0 9.3-2.1 12.3-5.8 7-8.5 14.5-16.7 22.4-24.5 32.6-32.5 70.5-58.1 112.7-75.9 43.6-18.4 90-27.8 137.9-27.8 47.9 0 94.3 9.3 137.9 27.8 42.2 17.8 80.1 43.4 112.7 75.9 32.6 32.5 58.1 70.4 76 112.5C865.7 417.8 875 464.1 875 512c0 47.9-9.4 94.2-27.8 137.8-17.8 42.1-43.4 80-76 112.5s-70.5 58.1-112.7 75.9A352.8 352.8 0 01520.6 866c-47.9 0-94.3-9.4-137.9-27.8A353.84 353.84 0 01270 762.3c-7.9-7.9-15.3-16.1-22.4-24.5-3-3.7-7.6-5.8-12.3-5.8H165c-6.3 0-10.2 7-6.7 12.3C234.9 863.2 368.5 942 520.6 942c236.2 0 428-190.1 430.4-425.6C953.4 277.1 761.3 82.6 521.7 82zM395.02 624v-76h-314c-4.4 0-8-3.6-8-8v-56c0-4.4 3.6-8 8-8h314v-76c0-6.7 7.8-10.5 13-6.3l141.9 112a8 8 0 010 12.6l-141.9 112c-5.2 4.1-13 .4-13-6.3z"></path></svg>
                <span>导入单位</span>
            </a>
        </div>
        <!-- 单位管理 -->
        <div class="card">
            <Grid :gridDatas="grid03" v-on:getTeg="doTheThing($event, this)" v-on:changePage="onChangePage"></Grid>
        </div>
    </div>
</template>

<script>
import Grid from "@/components/gridBody";
import httpRequest from "@/util/httpRequest";
import { useStore } from "vuex";
import Upload from "@/util/upload";
export default {
  name: "disktop",
  components: {
    Grid
  },
  data() {
    return {
      isTongBaoItems:false,
      roleId: null,
      dowExlUrl: "http://180.167.78.98:8248/exportFirm.do",
      natureTypeIds: [],
      roleList: [],
      grid03: {
        pageData: {
          canReport:"",
          natureTypeId: "",
          inspectLevel: "",
          keywords: "",
          orderBy: "",
          psId: "",
          pageNo: 1,
          pageSize: 10,
			total:0,
          showTotal: (total) => `共计：${total}家单位`
        },
        title: "",
        data: [],
        showSel: true,
        columns: [
          {
            title: "单位名称",
            dataIndex: "name",
            key: "name",
            slots: {
              customRender: "name"
            }
          },
          {
            title: "资产总数",
            dataIndex: "assetCount",
            key: "assetCount"
          },
          {
            title: "高危漏洞总数",
            key: "highBugCount",
            dataIndex: "highBugCount",
            sorter: true
          },
          {
            title: "中危漏洞总数",
            key: "mediumBugCount",
            dataIndex: "mediumBugCount"
          },
          {
            title: "通报总数",
            key: "reportCount",
            dataIndex: "reportCount"
          },
          {
            title: "检验次数",
            key: "inspectCount",
            dataIndex: "inspectCount"
          },
          {
            title: " ",
            key: "isReportGenerated",
            dataIndex: "isReportGenerated",
            slots: {
              customRender: "isReportGenerated"
            }
          },
          {
            title: "操作",
            key: "action",
            slots: {
              customRender: "action"
            }
          }
        ]
      },
      timer: null,
      isSearch: ""
    };
  },
  mounted() {
    this.roleId = JSON.parse(localStorage.getItem("roleId"));
    if (this.roleId == 1) {
      this.grid03.columns.splice(this.grid03.columns.length-2,0,{
        title: "辖区派出所",
        key: "psName",
        dataIndex: "psName"
      });
    }
    httpRequest.post("企业性质集合(用于选择框)", {}).then(res => {
      this.natureTypeIds = res.data.list;
    });
    httpRequest.post("角色集合", {}).then(res => {
      this.roleList = res.data.list.filter(e=>e.id !== 1);
    });
    const store = useStore();
    store.dispatch("setBreadcrumb", { text: "单位管理", isBack: false });
    this.thisPostList();
  },
  methods: {
    doTheThing: (e, that) => {
      that.$router.push({ name: "ManagementDtl", params: { id: e.id } });
    },
    onChangePage(page, filter, sorter) {
      console.log(page, filter, sorter);
      if (sorter.order === "descend") {
        page.orderBy = "highBugCountDESC";
      } else if (sorter.order === "ascend") {
        page.orderBy = "highBugCountASC";
      } else {
        page.orderBy = "";
      }
      this.grid03.pageData = page;
      this.thisPostList();
    },
    onSelectChange: (teg, that) => {
      that.grid03.pageData = teg;
      that.thisPostList();
    },
    toTongBaoItems() {
      this.isTongBaoItems = !this.isTongBaoItems;
      this.grid03.pageData.canReport = this.isTongBaoItems? 'Y' : '';
      this.thisPostList();
    },
    thisPostList() {
      httpRequest.post("企业列表", this.grid03.pageData).then(res => {
        this.grid03.data = res.data.list;
        this.timer =
          this.grid03.data.length > 0 ? this.grid03.data[0].createTime : null;
        this.grid03.pageData.current = this.grid03.pageData.pageNo =
          res.data.pageNo;
        this.grid03.pageData.total =
          res.data.total;
      });
    },
    search() {
      if (this.grid03.pageData.keywords || this.isSearch) {
        this.grid03.pageData.pageNo = 1;
        this.thisPostList();
        this.isSearch = this.grid03.pageData.keywords;
      }
    },
    change() {
      this.grid03.pageData.pageNo = 1;
      this.thisPostList();
    },
    /**
     * 導入
     */
    upload(item) {
      Upload.Single({}, () => {
        item.loading = true;
      }).then(res => {
        httpRequest
          .post("导入单位", {
            url: res.data.url
          })
          .then(() => {
            this.getList();
          })
          .finally(() => {
            item.loading = false;
          });
      });
    },
    /**
     * 導出
     */
    dowExl() {
      let data = {
        keywords: this.grid03.pageData.keywords,
        inspectLevel: this.grid03.pageData.inspectLevel,
        natureTypeId: this.grid03.pageData.natureTypeId,
        psId: this.grid03.pageData.psId,
        orderBy: this.grid03.pageData.orderBy,
      };
      httpRequest
        .downloadBlob("导出单位", data)
        .then(async (res) => {
			const filename = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]);
			let url = window.URL.createObjectURL(new Blob([res.data],{ type: 'application/force-download' }));
			let link = document.createElement('a');
			link.style.display = 'none';
			link.href = url;
			link.setAttribute('download', filename);
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
			window.URL.revokeObjectURL(url);
        })
        .finally(() => {});
    }
  }
};
</script>

<style lang="less" scoped>
.body {
  padding: 30px;
  background: #fff;
  .card {
    width: 100%;
  }
  .tongbao-btn{
    padding: 5px 10px;
    margin-left: 5px;
    border-radius: 5px; 
  }
  .active{
    background:#4687FF;color:#fff;
  }

}
</style>
